<template>
  <div>
  <el-table
      :data="books"
      border
      style="width: 100%">
    <el-table-column  fixed  prop="bookid"  label="书籍编号"  width="300"></el-table-column>
    <el-table-column  prop="bookname"  label="书籍名称"  width="200"></el-table-column>
    <el-table-column  prop="author"  label="书籍作者"  width="120"></el-table-column>
    <el-table-column  prop="publisher"  label="书籍出版社"  width="180"></el-table-column>
    <el-table-column  prop="booktype"  label="书籍类型"  width="300"></el-table-column>
    <el-table-column  fixed="right"  label="操作"  width="100">
      <template slot-scope="scope">
        <el-button @click="updatebook(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="deletebook(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" 
  @current-change="page" >
  <!-- <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" > -->
</el-pagination>

</div>

</template>
<script>
export default {
  name: "IndexView",
  methods: {
    updatebook(row) {
      console.log(row)
      console.log(row.bookid);
      this.$router.push({path:"/three",query:{book:row}})
    },
    deletebook(row) {
      console.log(row.bookid);
      if(confirm("删除确认")){
      
      axios.delete("http://localhost:8088/books/del",{ data: { bookid: row.bookid } }).then(res => {
        if(res.data=="success"){alert("删除成功");this.$router.push("/one")}else{
            alert("删除失败")
          }
      })}
    },
   
    page(currentPage){
      console.log(currentPage)
      axios({
        url:"http://localhost:8088/books/page",
        method:"get",
        headers: {
      'Content-Type': 'application/json'
        },
        params:{
          // page:currentPage,
          page:currentPage,
          size:5
        }
      }).then(result =>{this.books = result.data.records;this.total =result.data.total;})
    }
  },
  data(){
    return{
      books:[],
      total:20,
      pageSize:5
    }
  },
  created() {
    axios.get("http://localhost:8088/books/selectAll").then((response) => {
      this.books = response.data.records;
      this.total =response.data.total;
    })
  }
}
</script>

<style scoped>

</style>
